<template>
    <el-drawer v-model="drawer" :title="currentRow?.name" style="margin-bottom: 0" size="80%" append-to-body
        @close="close">
        <BasicTableV2 :columns="columns" :isPage="false" :data="currentRow?.videos" align="center" show-overflow
            height="90px">
            <template #thumbnail_url="{ row }">
                <el-image :src="row.thumbnail_url" :preview-src-list="[row.thumbnail_url]" />
            </template>

            <template #title="{ row }">
                <el-text style="cursor: pointer;" type="primary" @click="jumpTo(row)">{{
                    row.title }}</el-text>
            </template>
        </BasicTableV2>
    </el-drawer>
</template>
<script setup>
const props = defineProps({
    currentRow: {
        type: Object,
        default: () => { },
    }
})
const drawer = ref(false)
const columns = [
    {
        title: 'thumbnail_url',
        field: 'thumbnail_url',
        width: 150,
    },
    // {
    //     title: 'video_id',
    //     field: 'video_id',
    //     width: 150,
    // },
    {
        title: 'title',
        field: 'title',
    },
    {
        title: 'views',
        field: 'views',
        width: 100,
    }
]
const jumpTo = (row) => {
    window.open(`https://www.youtube.com/shorts/${row.video_id}`, '_blank')
}
const open = () => {
    drawer.value = true
}
const close = () => {
    drawer.value = false
}
defineExpose({
    open,
    close
})
</script>
<style lang="scss" scoped></style>